<template>
  <div class="container">
      <div class="container-bj">
         <div class="personal_l fl">
              <img class="fl" src="../../../../static/img/tou.jpg">
         </div>
         <div class="personal_r fl">
            <span class="name">Myfwk</span>
            <p class="vip">超级会员</p>
         </div>
          <div class="container-integral">
              <span class="fl">可提现金额<span class="money">￥888</span></span>
              <span class="tixian fr">提现</span>
      </div>
      </div>      
     <div class="container-order"  tag="div">
         <div class="container-order-1">
             <p class="left">我的订单</p>
             <p @click="xuangou(1,'全部订单')" class="right">查看全部订单 ></p>
         </div>
         <div class="container-order-2">
             <p @click="xuangou(2,'待拼团')" class="" >
                 <img src="static/img/order_dpt.png">
                 <span>待拼团</span>
             </p>
              <p @click="xuangou(2,'已拼团')" class="" >
                 <img src="static/img/order_yct.png">
                 <span>已拼团</span>
             </p>
              <p @click="xuangou(2,'已确认收货')" class="" >
                 <img src="static/img/order_qrsh.png">
                 <span>已确认收货</span>
             </p>
              <p @click="xuangou(2,'审核成功')" class="" >
                 <img src="static/img/order_shcg.png">
                 <span>审核成功</span>
             </p>
              <p @click="xuangou(2,'审核失败')" class="" >
                 <img src="static/img/order_shsb.png">
                 <span>审核失败</span>
             </p>
         </div>
     </div>
    
      <div class="container-con" id="transition">
            <div v-if="isshow" @click="downhide()"  class="zhegai"></div>
            <div @click="showbox" class="con">
                <div class="con-left">          
                      <img class="service" src="../../../../static/img/service.png" alt="">
                  <span>联系我们</span>
                </div>
                <div class="con-rigth">
                    <i class="iconfont icon-youjiantou"></i>
                </div>
            </div>

          <div class="kaiqi">已开启分享赚</div>
          <div v-if="isshow" class="ewmbox">
              <img :class="{scale:isTrue}" src="/static/img/ewm.png"  @touchstart="Loop_Sub()" @touchend="clearLoop()"  @click="imgScale(1)" alt="">
              <p>点击二维码然后长按保存或转发，联系您的专属客服</p>
              <div @click="close" class="guanbi"></div>
          </div>
            <div data-v-4eb8d02a="" id="target" class="qrcode">
                <canvas id="canvas"  width="800" height="800" ></canvas>
            </div>   
      </div>
      
    <div v-if="isdown" class="down">
        <ul>
            <li>发送给朋友</li>
            <li  @click="draw()">保存图片</li>
            <li>收藏</li>
        </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name:"Mycontainer",
  data(){
      return{
          container:[],
          isTrue:false,
          isshow:false,
          ishide:false,
          Loop:null,
          isdown:false
      }
  },
  methods: {
       draw:function(){
            var that = this;
            var _this = this;
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');  //获取对应的2D对象(画笔)
            var bgimg=new Image();
            bgimg.crossOrigin="anonymous";
            bgimg.src="./static/img/ewm.png"                              
            context.fillStyle = '#000';
            context.strokeStyle = '#000'; //设置笔触的颜色
            context.font = "38px 黑体"          
            context.fillStyle = '#ff4040';           
            //下载图片
            bgimg.onload = function(){
                context.drawImage(bgimg,0,0,canvas.width,canvas.height);
                that.isReady=true;
                that.saveImg();
                }
      },
      
    // 将canvas生成的图片保存
    saveImg() {
            var canvasData = document.getElementById("canvas");
            var a = document.createElement("a");
            a.href = canvasData.toDataURL();;
            a.download = "drcQrcode";
            a.click();
    },
      Loop_Sub:function(){
          var _this=this;
            _this.Loop=setTimeout(function(){
            _this.isdown=true;
　　　　　　},1000);
　　　　},
    downhide:function(){
        var _this=this;
        _this.isdown=false;
    },
　　　　clearLoop:function(){
            var _this=this;
　　　　　　clearTimeout(_this.Loop);
　　　　},
      changeStatus: function () {
      if (this.isShown) {
        this.ishide = false
      } else {
        this.ishide = true
      }
    },
      showbox:function(){
          this.isshow=true
      },
      close:function(){
          this.isshow=false
      },
      imgScale:function (index) { 
        this.isTrue = !this.isTrue;
        },
      xuangou:function(hh,tit){
      if(hh==2){
          this.$router.push({ path: "order", query: {  
              cat_id:hh,
              title:tit
        } });
      }else{
          this.$router.push({ path: "AllOrder", query: {  
              cat_id:hh,
              title:tit
        } });
      }

    }
  },
    computed:{
      ...mapGetters(["this.$store.state.orders"]),
       jifeng(){
          var jifeng=0
          this.$store.state.orders.forEach(list => {
            jifeng += parseInt(list.price)
        });
         return jifeng;
      }
  },
}
</script>


<style lang="stylus" scoped>
#canvas{
    display none
}
.down{
    background-color #fff
    width 100%
    position fixed
    bottom 0
    z-index 2
    padding-left .5rem
    font-size .3rem
}
.down li{
    // border-bottom 1px #ccc solid 
    height 1.2rem
    line-height 1.2rem
}
// @keyframes dialog-fade-in {
//   0% {
//     transform: translate3d(0, 100%, 0);
//     opacity: 0;
//   }
//   100% {
//     transform: translate3d(0, 0, 0);
//     opacity: 1;
//   }
// }
// @keyframes dialog-fade-out {
//   0% {
//     transform: translate3d(0, 0, 0);
//     opacity: 1;
//   }
//   100% {
//     transform: translate3d(0, -100%, 0);
//     opacity: 0;
//   }
// }
.ewmbox{
    position fixed
    background-color #fff
    width 6rem
    height 7rem
    left 2rem
    top 4rem
    z-index 2
    padding .5rem 1rem
}
.ewmbox img{
    width 4rem
}
.ewmbox p{
    margin-top .5rem
    line-height .5rem
    font-size .3rem
}
.guanbi{
    background url("/static/img/special_close.png")
    position absolute
    width .7rem
    height .7rem
    background-size contain
    right -.45rem
    top -.45rem
    z-index 2
}
.zhegai{
    width 100%
    // height 100%
    background-color rgba(0,0,0,.5)
    z-index 1
    height 100rem
    position fixed
    top 0
}
img { 
    // transform: scale(1); /*图片原始大小1倍*/ 
    transition: all ease 0.5s; } /*图片放大所用时间*/ 
img.scale { 
    transform: scale(2.5); 
    position: relative; /*相对定位，是相对于前面的容器定位的*/ 
    top 1rem
    z-index: 100; } /*属性设置元素的堆叠顺序,保证图片放大后处于最上层*/
.personal_r{
    font-size .2rem
    padding-top .5rem
}
.personal_l{
    width 2rem
}
.vip{
    padding 0 .2rem
    background-color #ff4040
    border-radius .2rem
    font-size .2rem
    color #fff
    margin-top .1rem
}
.service{
    width .6rem
    height .6rem
}
.kaiqi{
    font-size .4rem
    color #fff
    width 94%   
    height 1rem
    text-align center
    margin .2rem auto
    line-height 1rem
    border-radius .12rem
    background-color #ff4040
}
.fl{
    float left
}
.fr{
    float right 
}

.tixian{
    background-color #ff4040
    padding .1rem .4rem
    border-radius .24rem
}
.container-order{
    width 100%
    height 3.1rem
    background white
    display block
    margin-bottom .15rem
    margin-top .15rem
    font-size 0.35rem
    .container-order-1{
        width 100%
        height 1rem
        border-bottom 1px #eee solid
        .left{
            float: left;
            display: block;
            line-height: 1rem;
            margin-left: .5rem;
            font-size: 0.3rem;
        }
        .right {
            float: right;
            line-height: 1rem;
            margin-right: .6rem;
            font-size: 0.3rem;
        }
    }
    .container-order-2{
        padding-top .3rem
        width 100%
        height 1.5rem
        display flex
        justify-content center
        align-items center
       
        p{
            width 25%
            display flex
            flex-direction column
            margin-top .3rem
           
            img{
                width .8rem
                height .8rem
                margin auto
            }
            span{
                text-align center
                padding-top .3rem
            }
        }
    }
}
.container {
    width: 100%;
    height: 3.7rem;
    position: absolute;
    top: 1.15rem;
   
    .container-bj {
        width: 100%;
        height: 100%;
        background-color #000;
        background-size: 100% 100%;
        justify-content: center;
        flex-direction: column;
         padding .6rem .6rem 

        img {
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 50%;
        }

        span {
            color: #ffffff;
        }
        .container-integral{
            width 94%
            height .8rem
            background #ffffff
            display: block;
            position absolute
            padding .2rem .23rem
            bottom 0
            left .3rem
            justify-content: center
            span{
                color #898989
                font-size .26rem
            }
                .tixian{
                    color #fff
                }
                .money{
                    color #ff4040
                }
        }
    }
    .container-con {
        margin-bottom 1.45rem
        .con {
            width: 100%;
            height: 1.1rem;
            background: #ffffff;
            border-bottom: 1px solid #f0f0f0;
            display: block;

            .con-left {
                float: left;
                line-height: 1.1rem;
                padding-left: 0.47rem;

                i {
                    font-size: 0.5rem;
                }

                span {
                    font-size: 0.37rem;
                    padding-left: 0.1rem;
                }
            }

            .con-rigth {
                float: right;
                line-height: 1.1rem;
                padding-right: 0.4rem;
            }
        }
    }
}
</style>